<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>表格操作 - layui</title>

    <link rel="stylesheet" href="/static/layui-master/dist/css/layui.css">

    <style>
        body {
            padding: 20px; /*overflow-y: scroll;*/
        }
    </style>
</head>
<body>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">查看</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">导入</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">导出</button>
    </div>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script type="text/html" id="switchTpl">
    <input type="checkbox" name="yyy" lay-skin="switch" lay-text="女|男">
</script>


<script type="text/html" id="checkboxTpl">
    <input type="checkbox" name="" title="锁定" checked>
</script>


<table id="normal-problem-panel-table" lay-filter="data-table"></table>


<script src="/static/layui-master/dist/layui.js"></script>
<script>

    layui.use(['table', 'jquery', 'layer', 'form'], function () {
        var table = layui.table,
            layer = layui.layer,
            form = layui.form,
            $ = layui.jquery;

        //渲染表格
        var normalProblemTable = table.render({//渲染table
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'print', 'exports', {
                title: '提示' //标题
                , layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                , icon: 'layui-icon-tips' //图标类名
            }],
            method: 'post',//数据传输方式为post
            height: 'full-20',//高度为屏幕高度-20
            cellMinWidth: 80,//单元格最小宽度为80
            page: true,//开启分页
            limit: 30,//分页默认为30
            elem: '#normal-problem-panel-table',//设置容器
            url: '{% url 'get_domainDateList' %}',//数据获取url

            cols: [[//设置列标签、标题、宽度、是否排序等
                {field: 'id', title: 'ID', width: 80, type: 'checkbox', sort: true},
                {field: 'originalId', title: '类别', width: 80,},
                {field: 'ipProtocol', title: '描述',},
                {field: 'rootId', title: '记录人',},
                {field: 'totDataBytes', title: '记录时间',},

                {field: 'srcDataBytes', title: 'ID', width: 80, sort: true},
                {field: 'dstDataBytes', title: '类别', width: 80,},
                {field: 'firstPacket', title: '描述',},
                {field: 'lastPacket', title: '记录人',},
                {field: 'srcIp', title: '记录时间',},

                {field: 'srcPort', title: 'ID', width: 80, sort: true},
                {field: 'dstIp', title: '类别', width: 80,},
                {field: 'dstPort', title: '描述',},
                {field: 'totPackets', title: '记录人',},
                {field: 'srcPackets', title: '记录时间',},


                {field: 'dstPackets', title: 'ID', width: 80, sort: true},
                {field: 'totBytes', title: '类别', width: 80,},
                {field: 'srcBytes', title: '描述',},
                {field: 'dstBytes', title: '记录人',},
                {field: 'node', title: '记录时间',},

                {field: 'uri', title: 'ID', width: 80, sort: true},
                {field: 'srcGEO', title: '类别', width: 80,},
                {field: 'dstGEO', title: '描述',},
                {field: 'subject', title: '记录人',},
                {field: 'src', title: '记录时间',},

                {field: 'dst', title: 'ID', width: 80, sort: true},
                {field: 'filename', title: '类别', width: 80,},
                {field: 'host', title: '描述',},
                {field: 'certificate', title: '记录人',},
                {field: 'channel', title: '记录时间',},


                {fixed: 'right', width: 200, toolbar: '#barDemo'},//设置每行的工具栏以及其容器
            ]],
        });

        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    , title: 'xxx'
                });
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });


    })
</script>
</body>
</html>
